﻿<div class="tabs-users tabs-users-left">
    <ul>
        <li><a data-ng-class="{active : activeViewPath==='/users' || isActive('/user') }" href="#/users">Users</a></li>
        <li><a data-ng-class="{active : activeViewPath==='/accounts' || isActive('/account')}" href="#/accounts">Accounts</a></li>
    </ul>
</div>

<div class="tabs-users-right">
    <strong title="dd/mm/yyyy hh:mm"> Last synchronization with CRM: {{lastSyncWithCRM | date:'dd/MM/yyyy HH:mm'  }} </strong>
</div>

<br /><br />


<div class="user-inputs">
    <form name="usersFiltersForm">
        <select class="select-box" data-ng-model="userStatus" ng-change="statusChange()" style="width: 49%; margin-right: 29px;">
            <option value="All">All Users</option>
            <option value="Active">Active Users</option>
            <option value="Inactive">Inactive Users</option>
        </select>
        <input type="text" title="Search User" class=" search-inp" name="searchText" data-ng-model="usersForm.searchText" placeholder="Search User" style="width: 48%;" />
        <input type="submit" value="" ng-click="getUsers(true)" class="search-btn">
    </form>
</div>
<div class="clear">&nbsp;</div>
<br /><br />
<div style="display: table; width: 790px; float: left;">
	<div class="table-row">
        <div style="width: 3%;" title="Select All" class="table-head"><input type="checkbox" name="" ng-model="allUsersChecked" ng-click="allUsersCheckedChanged()"></div>
        <div style="width: 30%;" class="table-head"><a ng-class="{sortable_down: checkSortBy('fullName',false),sortable_up: checkSortBy('fullName', true)}" data-ng-click="setOrder('fullName')">Full Name</a></div>
        <div style="width: 24%;" class="table-head"><a ng-class="{sortable_down: checkSortBy('email',false),sortable_up: checkSortBy('email', true)}" data-ng-click="setOrder('email')">Email</a></div>
        <div style="width: 24%; position: relative;" class="table-head">
            <a ng-class="{sortable_down: checkSortBy('account',false),sortable_up: checkSortBy('account', true)}" data-ng-click="setOrder('account')">Account</a>
            <div style="position: absolute; top: 10px; left: 85px;">
                <a ng-click="openFilterContainer()" title="Account filter" hide-login="hideFilterContainer()" href="" class="account_filter"><img src="Content/images/iconmonstr-filter-5-icon-24.png"></a>
                <div style="position: relative">
                    <div hide-login="hideFilterContainer()" ng-show="showDiv" class="acc-filter-options">
                        <input type="text" ng-model="search.name" style="float: left; width: 152px;" />
                        <a ng-click="resetUsersList()" title="Reset filter" href="" class="account_filter" style="float: left; margin: 6px 0 0 10px;"><img src="Content/images/icn-reset-user.png" width="15" style="width: 15px;"></a>
                        <div class="clear">&nbsp;</div>
                        <br />
                        <div data-ng-repeat="item in accountsList | filter: search">
                            <div style="float: left; margin-right: 10px;"><input type="checkbox" ng-model="item.isSelected"></div>
                            <div class="account-list-box" style="float: left;" title="{{item.name}}">{{item.name}}</div>
                            <div class="clear">&nbsp;</div>
                        </div>
                    </div>
                </div>
            </div>           
        </div>
		<div style="width: 17%;" class="table-head"><a ng-class="{sortable_down: checkSortBy('lastAccessDate',false),sortable_up: checkSortBy('lastAccessDate', true)}" data-ng-click="setOrder('lastAccessDate')">Last Access Date</a></div>
		<div class="table-head"><a ng-class="{sortable_down: checkSortBy('status',false),sortable_up: checkSortBy('status', true)}" data-ng-click="setOrder('status')">Status</a></div>
	</div>
    <div data-ng-repeat="user in usersList| filter:{isFakeIpUser:false} " class="table-row">
        <div style="width: 3%;" class="table-col"><input type="checkbox" ng-model="user.isSelected" ng-init="false"></div>
        <div style="width: 30%;" class="table-col"><a href="#/user/{{user.id}}">{{user.fullName}}</a></div>
        <div style="width: 24%;" class="table-col">{{user.email}}</div>
        <div style="width: 24%;" class="table-col"><div title="{{user.account}}">{{user.account}}</div></div>
        <div style="width: 17%;" class="table-col">{{user.lastAccessDate}}</div>
        <div class="table-col">{{user.status}}</div>
    </div>
    <div data-ng-show="usersList.length == 0" class="table-row">
        No user found
    </div>
</div>
<div style="display: table; width: 200px; float: left;">
	<div class="table-row">
		<div class="table-col sel-items">
			<div class="title-sel-items">
				Users Selected: <span style="color: #24b1a8;">{{selectedUsersCounter()}}</span>
			</div>
			<br /><br />
            <button class="btn-green" data-ng-click="resetPassword()">Reset Password</button>
		</div>
	</div>
</div>
<div class="clear">&nbsp;</div>
<br /><br />

<sustainalytics-pager></sustainalytics-pager>
<!--<div class="pagination" data-ng-show="usersList.length > 0" style="margin-bottom:34px">
    <div style="float: left; margin-top: 29px;">
        <span style="font-size: 13px;">Showing results {{ displayedItems() }} out of {{ totalRecords}}</span>
        <ul>
            <li ng-class="{disabled: currentPage == 1}">
                <a ng-click="prevPage()">« Prev</a>
            </li>

            <li ng-repeat="n in range() " ng-class="{active: n == currentPage}" ng-click="setPage()">
                <a ng-bind="n">1</a>
            </li>

            <li ng-class="{disabled: (currentPage) == range().length}">
                <a ng-click="nextPage()">Next »</a>
            </li>
        </ul>
    </div>
    <div style="float: left; margin-left: 10px;">
        <div style="text-align: center; margin-bottom: 4px;">Per Page</div>
        <select class="select-box" id="pageSize" name="pageSize" data-ng-change="changePageSize()" data-ng-model="pageSize" style="margin-right: 0;">
            <option value="20" selected="selected">20</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
    </div>
    <div class="clear">&nbsp;</div>
</div>-->